<template>
  <div class="container">
    <header>
      <div></div>
      <div>数据概览</div>
    </header>
    <div class="container-con">
      <div class="card-box">
        <div v-for="item in cardList">
          <div>{{ item.value }}</div>
          <div></div>
          <div>{{ item.title }}</div>
        </div>
      </div>
      <!-- <div class="card-box">
        <div v-for="item in cardList1">
          <div>{{ item.value }}</div>
          <div></div>
          <div>{{ item.title }}</div>
        </div>
      </div> -->
      <div class="row-wrap">
        <div class="left-card">
          <div class="left-card-head">
            <div>
              <img src="../assets/index/barChar.png" alt="">
              <span>销售订单统计</span>
            </div>
            <div>
              <!-- <el-tabs class="custom-tabs" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="本月" name="first"></el-tab-pane>
                <el-tab-pane label="上月" name="second"></el-tab-pane>
                <el-tab-pane label="近半年" name="third"></el-tab-pane>
              </el-tabs> -->
              <el-date-picker v-model="value2" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss" @change="changeValue2" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
          <!-- <div class="timeSelect">
            <div></div>
            <div class="timeRight">
              <div class="data-wrap">
                <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                </el-date-picker>
              </div>
              <div class="data-wrap">
                <el-date-picker v-model="value2" type="date" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>

          </div> -->
          <div id="left-card-con">
            <bar-chart :chart-data="barData" />
          </div>
        </div>
        <div class="right-card">
          <div class="right-card-head">
            <div>
              <img src="../assets/index/useCard.png" alt="">
              <span>企业购卡用卡对比</span>
            </div>
          </div>
          <div class="right-card-con">
            <use-card-chart :userCardData="userCardData" />
          </div>
        </div>
      </div>
      <div class="row-wrap" style="margin-top: 20px ">
        <div class="left-card">
          <div class="left-card-head">
            <div>
              <img src="../assets/index/order.png" alt="">
              <span>观影订单统计</span>
            </div>
            <div>
              <el-date-picker v-model="value1" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                @change="changeValue1" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
              <!-- <el-tabs class="custom-tabs" v-model="activeNameSee" @tab-click="handleClickSee">
                <el-tab-pane label="本月" name="first"></el-tab-pane>
                <el-tab-pane label="上月" name="second"></el-tab-pane>
                <el-tab-pane label="近半年" name="third"></el-tab-pane>
              </el-tabs> -->

            </div>
          </div>
          <!-- <div class="timeSelect">
            <div>

            </div>
            <div class="timeRight">
              <div class="data-wrap">
                <el-date-picker v-model="value3" type="date" placeholder="选择日期">
                </el-date-picker>
              </div>
              <div class="data-wrap">
                <el-date-picker v-model="value4" type="date" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>

          </div> -->
          <div id="left-card-con">
            <order-chart :chartData="chartData" />
          </div>
        </div>
        <div class="right-card">
          <div class="right-card-head">
            <div style="width: 30%;">
              <img src="../assets/index/circle.png" alt="">
              <span>销售金额统计</span>
            </div>
            <div style="width: 70%;">
              <el-date-picker v-model="value3" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                @change="changeValue3" style="width: 100% !important;" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>

            </div>
          </div>
          <div class="right-card-con">
            <circle-chart :chartData="dynamicData" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BarChart from './index/cnps/BarChart.vue'
import UseCardChart from "@/views/index/cnps/UseCardChart.vue";
import OrderChart from "@/views/index/cnps/OrderChart.vue";
import CircleChart from "@/views/index/cnps/CircleChart.vue";
import {
  platformaccount,haiweibalance,
  moviecount, pointscount, movieactivated, pointsactivated,
  movietotal, converttotal, ticketTotalProfit, convertTotalProfit,
  getEnterpriseCardStats, orderCountCompare, orders, salesCompare
} from '@/api/home.js'
export default {
  name: 'index',
  components: {
    BarChart,
    UseCardChart,
    OrderChart,
    CircleChart
  },
  data() {
 const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0');
  const day = String(today.getDate()).padStart(2, '0');

  // Current week start and end (value1)
  const currentWeekStart = new Date(today);
  currentWeekStart.setDate(today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1)); // Monday
  const currentWeekEnd = new Date(currentWeekStart);
  currentWeekEnd.setDate(currentWeekStart.getDate() + 6); // Sunday
  
  // Current month start and end (value2)
  const currentMonthStart = new Date(year, today.getMonth(), 1);
  const currentMonthEnd = new Date(year, today.getMonth() + 1, 0);
  
  // Current year start and end (value3)
  const currentYearStart = new Date(year, 0, 1);
  const currentYearEnd = new Date(year, 11, 31);

  // Format functions
  const formatDate = (date) => {
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  };
  
  const formatDateTime = (date) => {
    return `${formatDate(date)} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
  };
    return {
      cardList: [
        {
          title: '观影次数发卡数量',
          value: 0
        },
        {
          title: '积分卡发卡数量',
          value: 0
        },
        {
          title: '已激活观影卡数量',
          value: 0
        },
        {
          title: '已激活积分卡数量',
          value: 0
        },
        {
          title: '累计观影订单数量',
          value: 0
        },
        {
          title: '累计兑换订单数量',
          value: 0
        },
        {
          title: '电影订单利润',
          value: 0
        }, {
          title: '兑换订单利润',
          value: 0
        }, {

          title: '电影预存剩余金额',
          value: 0
        }
        , {
          title: '兑换预存剩余金额',
          value: 0
        }

      ],
      activeName: 'first',
      activeNameSee: 'first',
     value1: [formatDate(currentWeekStart), formatDate(currentWeekEnd)], // Current week range
    value2: [
      formatDateTime(new Date(currentMonthStart.setHours(0, 0, 0, 0))), 
      formatDateTime(new Date(currentMonthEnd.setHours(23, 59, 59, 0)))
    ], // Current month 00:00:00 to 23:59:59
    value3: [formatDate(currentYearStart), formatDate(currentYearEnd)], // Current year range
      barData: {

      },
      userCardData: [],
      chartData: [

      ],
      dynamicData: [

      ],
    }
  },
  mounted() {
    moviecount().then(res => {
      this.cardList[0].value = res.data
    })
    pointscount().then(res => {
      this.cardList[1].value = res.data
    })
    movieactivated().then(res => {
      this.cardList[2].value = res.data
    })
    pointsactivated().then(res => {
      this.cardList[3].value = res.data
    })
    movietotal().then(res => {
      this.cardList[4].value = res.data
    })
    converttotal().then(res => {
      this.cardList[5].value = res.data
    })
    ticketTotalProfit().then(res => {
      this.cardList[6].value = res.data
    })
    convertTotalProfit().then(res => {
      this.cardList[7].value = res.data
    })
    platformaccount().then(res => {
      console.log(JSON.parse(res.data.body).data.credit)
      this.cardList[8].value = JSON.parse(res.data.body).data.credit
    })
    haiweibalance().then(res => {
      this.cardList[9].value = res.data.balance
    })
    getEnterpriseCardStats().then(res => {
      this.userCardData = res.data
    })

    this.getorderCountCompare(this.value2[0], this.value2[1])
    this.getorders(this.value1[0], this.value1[1])
    this.getsalesCompare(this.value3[0], this.value3[1])
  },
  methods: {
    changeValue2(e) {
      this.getorderCountCompare(e[0], e[1])
    },
    changeValue1(e) {
      this.getorders(e[0], e[1])
    },
    changeValue3(e) {
      this.getsalesCompare(e[0], e[1])
    },
    getorders(startDate, endDate) {
      orders({
        startDate, endDate
      }).then(res => {
        res.data.forEach(element => {
          element.view = element.movieCount
          element.exchange = element.convertCount
        });
        this.$set(this, 'chartData', res.data)
      })
    },
    getsalesCompare(startDate, endDate) {
      salesCompare({
        startDate, endDate
      }).then(res => {
        let convertTotal = res.data.convertTotal
        let ticketTotal = res.data.ticketTotal
        this.$set(this, 'dynamicData', [
          {
            name: '兑换金额', value: convertTotal
          },
          {
            name: '电影金额', value: ticketTotal
          }
        ])
      })
    },
    getorderCountCompare(startTime, endTime) {
      orderCountCompare({
        startTime, endTime
      }).then(res => {
        let xAxisData = res.data.map(item => item.name)
        let seriesData = res.data.map(item => item.value)
        this.$set(this, 'barData', {
          xAxisData, seriesData
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  // width: 100%;
  background: #F5F4F8;
  padding: 0;
  margin: 0;
  height: 100%;
  padding-bottom: 20px;

  header {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;

    >div:nth-child(1) {
      width: 3px;
      height: 20px;
      background: #EE473B;
    }

    >div:nth-child(2) {
      font-weight: 600;
      font-size: 20px;
      color: #0C2F48;
      margin-left: 10px;
    }
  }


  .card-box {
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    >div {
      flex: 1;
      min-width: 0;
      height: 100%;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
      border-radius: 10px;
      background: #FFFFFF;

      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-content: space-between;
      margin-bottom: 10px;

      >div:nth-child(1) {
        width: 100%;
        font-size: 20px;
        color: #333333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      >div:nth-child(2) {
        width: 100%;
        height: 4px;
        margin-top: 5px;
        background: linear-gradient(90deg, #EE473B 0%, rgba(244, 158, 151, 0) 100%);
      }

      >div:nth-child(3) {
        font-weight: 400;
        font-size: 0.8rem;
        width: 100%;
        color: #999999;
        margin-top: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .row-wrap {
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-card {
      width: 50%;
      height: 500px;
      box-sizing: border-box;
      background: #FFFFFF;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      align-items: center;

      &-head {
        width: 100%;
        display: flex;
        padding: 20px;
        justify-content: space-between;
        align-items: center;

        >div:nth-child(1) {
          width: 30%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          img {
            width: 18px;
            height: 18px;
            vertical-align: middle; // 确保图片垂直对齐
          }

          span {
            font-size: 16px;
            color: #303030;
            margin-left: 10px;
            line-height: 1; // 确保文字行高一致
          }
        }

        >div:nth-child(2) {
          width: 70%;
          display: flex;
          justify-content: flex-end;
          flex-wrap: wrap;
          align-items: center;

        }

        ::v-deep .el-tabs {
          height: 27px;
        }

        ::v-deep .el-tabs__nav-wrap {
          height: 27px;
        }

        ::v-deep .el-tabs__nav-scroll {
          height: 27px;
        }

        ::v-deep .el-tabs__nav {
          height: 27px;
        }

        ::v-deep .el-tabs__nav-wrap::after {
          display: none;
        }

        ::v-deep .el-tabs__active-bar {
          background-color: #EE473B;
          bottom: 5px;
        }

        ::v-deep .el-tabs__item.is-active {
          color: #EE473B;
        }

        ::v-deep .el-tabs__item {
          padding: 0 18px;
        }

        ::v-deep .el-tabs__item:hover {
          color: #EE473B;
        }

        ::v-deep .el-tabs__header {
          margin: 0;
          height: 27px;
        }

        ::v-deep .el-tabs__item {
          height: 27px;
          line-height: 27px;
        }
      }

      #left-card-con {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .right-card {
      height: 500px;
      width: 50%;
      margin-left: 10px;
      box-sizing: border-box;
      background: #FFFFFF;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      border-radius: 8px;

      &-head {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;

        >div:nth-child(1) {
          img {
            width: 18px;
            height: 18px;
            vertical-align: middle; // 确保图片垂直对齐
          }

          span {
            font-size: 16px;
            color: #303030;
            margin-left: 10px;
            line-height: 1; // 确保文字行高一致
          }
        }
      }

      &-con {
        width: 100%;
        height: calc(100% - 47px);
        display: flex;
        align-items: center;
      }
    }
  }
}

.timeSelect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px; // 添加与头部一致的内边距
  width: 100%;

  .timeRight {
    display: flex;
    align-items: center;
    justify-content: flex-end; // 使内容靠右
    flex: 1; // 占据剩余空间

    .data-wrap {
      width: 127px;
      height: 27px;
      margin-left: 12px;

      ::v-deep .el-date-editor {
        width: 100%;
        height: 100%;
      }

      ::v-deep .el-input--medium .el-input__inner {
        height: 100%;
        padding: 0 28px;
        background: #F4F4F4;
        border: none;
        border-radius: 14px;
      }

      ::v-deep .el-input--medium .el-input__icon {
        line-height: 27px;
      }

      ::v-deep .el-input__prefix {
        left: 2px;
      }
    }
  }

}
</style>
